<template>
  <div>
    <!-- 头部部分 -->
    <div id="head" style="display: flex">
      <el-form
        :inline="true"
        :model="formInline"
        label-width="90px"
        style="height: 130px; width: 1500px"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="formInline.user"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input
            v-model="formInline.user"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input
            v-model="formInline.user"
            placeholder="请输入岗位"
          ></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input
            v-model="formInline.user"
            placeholder="请输入籍贯"
          ></el-input>
        </el-form-item>
        <el-form-item label="用工性质">
          <el-input
            v-model="formInline.user"
            placeholder="请输入用工性质"
          ></el-input>
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input
            v-model="formInline.user"
            placeholder="请输入毕业院校"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="请选择入职时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别">
          <el-input
            v-model="formInline.user"
            placeholder="请输入性别"
          ></el-input>
        </el-form-item>
        <div class="button" style="float: right">
          <!-- 搜索按钮 -->
          <el-button type="primary" icon="el-icon-search" @click="submit"
            >搜索</el-button
          >
          <!-- 新增按钮 -->
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="dialogVisible = true"
            >新增</el-button
          >
          <!-- 上传按钮 -->
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            style="float: right"
          >
            <el-button type="primary" icon="el-icon-upload">上传</el-button>
          </el-upload>
          <!-- 下载按钮 -->
          <el-button type="primary" icon="el-icon-download">下载</el-button>
        </div>
      </el-form>
    </div>
    <!-- 表格部分 -->
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%; overflow-x: auto; overflow-y: auto; height: 640px"
      border
    >
      <el-table-column fixed prop="id" label="序号" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="employeeId"
        label="员工编号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        fixed
        prop="name"
        label="姓名"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="department"
        label="部门"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="post" label="岗位" width="150" align="center">
      </el-table-column>
      <el-table-column prop="rank" label="职级" width="150" align="center">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="150" align="center">
      </el-table-column>
      <el-table-column prop="time" label="出生年月" width="150" align="center">
      </el-table-column>
      <el-table-column prop="year" label="年龄" width="150" align="center">
      </el-table-column>
      <el-table-column prop="marriage" label="婚否" width="150" align="center">
      </el-table-column>
      <el-table-column prop="jiguan" label="籍贯" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="hukouplace"
        label="户口所在地"
        width="300"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="hukounature"
        label="户口性质"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="IDcard"
        label="身份证号码"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="education" label="学历" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="school"
        label="毕业院校"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="major" label="专业" width="150" align="center">
      </el-table-column>
      <el-table-column prop="need" label="用工性质" width="150" align="center">
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="family"
        label="家庭地址"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="Inductiontime"
        label="入职时间"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="zztime"
        label="转正时间"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="zzsy" label="转正顺延" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="outtime"
        label="离职时间"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="english"
        label="外语水平"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="speciality"
        label="特长"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="title" label="职称" width="150" align="center">
      </el-table-column>
      <el-table-column prop="nation" label="民族" width="150" align="center">
      </el-table-column>
      <el-table-column prop="zzmm" label="政治面貌" width="150" align="center">
      </el-table-column>
      <el-table-column prop="sbzh" label="社保账号" width="150" align="center">
      </el-table-column>
      <el-table-column prop="gjj" label="公积金账号" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="gzkplace"
        label="工资卡开户行"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="gzkid"
        label="工资卡账号"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="contacts"
        label="紧急联系人"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="lxdh" label="联系方式" width="150" align="center">
      </el-table-column>
      <el-table-column
        prop="relationship"
        label="关系"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="remarksone"
        label="备注1"
        width="150"
        align="center"
      >
      </el-table-column
      ><el-table-column
        prop="remarkstwo"
        label="备注2"
        width="150"
        align="center"
      >
      </el-table-column
      ><el-table-column
        prop="remarksthree"
        label="备注3"
        width="150"
        align="center"
      >
      </el-table-column
      ><el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            type="primary"
            size="small"
            @click="bianji(scope.row)"
            style="margin: 0 10px"
            >编辑</el-button
          >
          <!-- 删除按钮 -->
          <el-popconfirm title="这行表格内容确定删除吗？">
            <el-button
              slot="reference"
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="del"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页符 -->
    <div class="block">
      <el-pagination
        background
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="upChange"
        @next-click="nextChange"
      >
      </el-pagination>
    </div>
    <!-- 新建弹窗 -->
    <el-dialog
      title="新建内容"
      :visible.sync="dialogVisible"
      width="1200px"
      :before-close="handleClose"
    >
      <!-- input表单内容 -->
      <el-form :inline="true" :model="newdo" label-width="100px">
        <el-form-item label="员工编号">
          <el-input
            v-model="newdo.employeeId"
            placeholder="员工编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="newdo.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="newdo.department" placeholder="部门"></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="newdo.post" placeholder="岗位"></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-input v-model="newdo.rank" placeholder="职级"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="newdo.sex" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-input v-model="newdo.time" placeholder="出生年月"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="newdo.year" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item label="婚否">
          <el-input v-model="newdo.marriage" placeholder="婚否"></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="newdo.jiguan" placeholder="籍贯"></el-input>
        </el-form-item>
        <el-form-item label="户口所在地">
          <el-input v-model="newdo.hukouplace" placeholder="所在地"></el-input>
        </el-form-item>
        <el-form-item label="户口性质">
          <el-input
            v-model="newdo.hukounature"
            placeholder="户口性质"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="newdo.IDcard" placeholder="身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="newdo.education" placeholder="学历"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input v-model="newdo.school" placeholder="毕业院校"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="newdo.major" placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="用工性质">
          <el-input v-model="newdo.need" placeholder="用工性质"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="newdo.tel" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="newdo.family" placeholder="家庭住址"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-input
            v-model="newdo.Inductiontime"
            placeholder="入职时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="转正时间">
          <el-input v-model="newdo.zztime" placeholder="转正时间"></el-input>
        </el-form-item>
        <el-form-item label="转正顺延">
          <el-input v-model="newdo.zzsy" placeholder="转正顺延"></el-input>
        </el-form-item>
        <el-form-item label="离职时间">
          <el-input v-model="newdo.outtime" placeholder="离职时间"></el-input>
        </el-form-item>
        <el-form-item label="外语水平">
          <el-input v-model="newdo.english" placeholder="外语水平"></el-input>
        </el-form-item>
        <el-form-item label="特长">
          <el-input v-model="newdo.speciality" placeholder="特长"></el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="newdo.title" placeholder="职称"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="newdo.nation" placeholder="民族"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input v-model="newdo.zzmm" placeholder="政治面貌"></el-input>
        </el-form-item>
        <el-form-item label="社保账号">
          <el-input v-model="newdo.sbzh" placeholder="社保账号"></el-input>
        </el-form-item>
        <el-form-item label="公积金账号">
          <el-input v-model="newdo.gjj" placeholder="公积金账号"></el-input>
        </el-form-item>
        <el-form-item label="工资卡开户行">
          <el-input
            v-model="newdo.gzkplace"
            placeholder="工资卡开户行"
          ></el-input>
        </el-form-item>
        <el-form-item label="工资卡账号">
          <el-input v-model="newdo.gzkid" placeholder="工资卡账号"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人">
          <el-input
            v-model="newdo.contacts"
            placeholder="紧急联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="newdo.lxdh" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="关系">
          <el-input v-model="newdo.relationship" placeholder="关系"></el-input>
        </el-form-item>
        <el-form-item label="备注1">
          <el-input v-model="newdo.remarksone" placeholder="备注1"></el-input>
        </el-form-item>
        <el-form-item label="备注2">
          <el-input v-model="newdo.remarkstwo" placeholder="备注2"></el-input>
        </el-form-item>
        <el-form-item label="备注3">
          <el-input v-model="newdo.remarksthree" placeholder="备注3"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部关闭确定按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      title="编辑表格"
      :visible.sync="dialogVisible1"
      width="1200px"
      :before-close="handleClose"
    >
      <!-- input表单内容 -->
      <el-form :inline="true" :model="bj" label-width="100px">
        <el-form-item label="员工编号">
          <el-input v-model="bj.employeeId" placeholder="员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="bj.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="bj.department" placeholder="部门"></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="bj.post" placeholder="岗位"></el-input>
        </el-form-item>
        <el-form-item label="职级">
          <el-input v-model="bj.rank" placeholder="职级"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="bj.sex" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="出生年月">
          <el-input v-model="bj.time" placeholder="出生年月"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="bj.year" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item label="婚否">
          <el-input v-model="bj.marriage" placeholder="婚否"></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="bj.jiguan" placeholder="籍贯"></el-input>
        </el-form-item>
        <el-form-item label="户口所在地">
          <el-input v-model="bj.hukouplace" placeholder="所在地"></el-input>
        </el-form-item>
        <el-form-item label="户口性质">
          <el-input v-model="bj.hukounature" placeholder="户口性质"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="bj.IDcard" placeholder="身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="bj.education" placeholder="学历"></el-input>
        </el-form-item>
        <el-form-item label="毕业院校">
          <el-input v-model="bj.school" placeholder="毕业院校"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="bj.major" placeholder="专业"></el-input>
        </el-form-item>
        <el-form-item label="用工性质">
          <el-input v-model="bj.need" placeholder="用工性质"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="bj.tel" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="bj.family" placeholder="家庭住址"></el-input>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-input
            v-model="bj.Inductiontime"
            placeholder="入职时间"
          ></el-input>
        </el-form-item>
        <el-form-item label="转正时间">
          <el-input v-model="bj.zztime" placeholder="转正时间"></el-input>
        </el-form-item>
        <el-form-item label="转正顺延">
          <el-input v-model="bj.zzsy" placeholder="转正顺延"></el-input>
        </el-form-item>
        <el-form-item label="离职时间">
          <el-input v-model="bj.outtime" placeholder="离职时间"></el-input>
        </el-form-item>
        <el-form-item label="外语水平">
          <el-input v-model="bj.english" placeholder="外语水平"></el-input>
        </el-form-item>
        <el-form-item label="特长">
          <el-input v-model="bj.speciality" placeholder="特长"></el-input>
        </el-form-item>
        <el-form-item label="职称">
          <el-input v-model="bj.title" placeholder="职称"></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="bj.nation" placeholder="民族"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input v-model="bj.zzmm" placeholder="政治面貌"></el-input>
        </el-form-item>
        <el-form-item label="社保账号">
          <el-input v-model="bj.sbzh" placeholder="社保账号"></el-input>
        </el-form-item>
        <el-form-item label="公积金账号">
          <el-input v-model="bj.gjj" placeholder="公积金账号"></el-input>
        </el-form-item>
        <el-form-item label="工资卡开户行">
          <el-input v-model="bj.gzkplace" placeholder="工资卡开户行"></el-input>
        </el-form-item>
        <el-form-item label="工资卡账号">
          <el-input v-model="bj.gzkid" placeholder="工资卡账号"></el-input>
        </el-form-item>
        <el-form-item label="紧急联系人">
          <el-input v-model="bj.contacts" placeholder="紧急联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="bj.lxdh" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="关系">
          <el-input v-model="bj.relationship" placeholder="关系"></el-input>
        </el-form-item>
        <el-form-item label="备注1">
          <el-input v-model="bj.remarksone" placeholder="备注1"></el-input>
        </el-form-item>
        <el-form-item label="备注2">
          <el-input v-model="bj.remarkstwo" placeholder="备注2"></el-input>
        </el-form-item>
        <el-form-item label="备注3">
          <el-input v-model="bj.remarksthree" placeholder="备注3"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部关闭确定按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "employeename",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      value1: "",
      // 表格数据
      tableData: [
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
        {
          id: 1,
          employeeId: 11111,
          name: "欣悦",
          department: "前端",
          post: "web前端工程师",
          rank: "初级",
          sex: "女",
          time: "2000.02.05",
          year: 22,
          marriage: "否",
          jiguan: "山西忻州",
          hukouplace: "山西省忻州市忻府区幸福大道",
          hukounature: "务农",
          IDcard: 1234567890123,
          education: "本科",
          school: "宇宙大学",
          major: "光",
          need: "不详",
          tel: 110,
          family: "幸福大道辛福村",
        },
      ],
      // 分页数据
      pageSize: 5, //一个数据条数
      currentPage: 1, //当前页从哪页开始
      total: 100, //设置总数
      // 新建
      dialogVisible: false,
      // 新建初始化数据
      newdo: {},
      // 编辑
      dialogVisible1: false,
      bj: {},
    };
  },
  methods: {
    // 分页处理
    // 改变每页显示的数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    // 更改页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1; //动态改变
    },
    // 下一页
    nextChange(val) {
      console.log(val);
      this.currentPage += 1; //动态改变
    },
    // 搜索按钮
    submit() {
      console.log("搜索");
    },
    // 新建关闭按钮
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 编辑按钮
    bianji(row) {
      this.bj = row;
      this.dialogVisible1 = true;
    },
    // 删除按钮
    del() {
      console.log("删除");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.el-input {
  width: 200px;
}
.block {
  float: right;
}
.button {
  .el-button {
    margin-left: 20px;
  }
}
</style>